
<template>
  <!-- 首页 -->
  <div class="home">
    <menu-nav></menu-nav>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images.pics" :key="index">
        <img v-lazy="image.pics_mid" class="with" @click="tupian(images.pics,index)" />
      </van-swipe-item>
    </van-swipe>
    <van-row>
      <span class="price">￥{{images.goods_price}}</span>
    </van-row>
    <van-row>
      <span class="left">{{images.goods_name}}</span>
      <van-icon name="star" :color="yanse" @click="star" />
      <p class="right" @click="bianse">收藏</p>
    </van-row>
    <van-row>
      <h2>快递:秒运费</h2>
    </van-row>
    <van-row>
      <div class="boxs"></div>
    </van-row>
    <van-row>
      <span class="rightsss">促销 : 满300减30</span>
    </van-row>
    <van-row>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" :info="infos" @click="ShoppingCart" />
        <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton(images.cat_id)" />
      </van-goods-action>
    </van-row>
    <van-row>
      <div class="boxas"></div>
    </van-row>
    <van-row>
      <van-icon name="arrow" class="addressa" @click="on" />
      <!-- 送货地址 -->

      <div class="address" @click="on">送至: {{postaddress}}</div>
    </van-row>
    <van-row>
      <div class="boxsd"></div>
    </van-row>
    <van-row>
      <van-tabs>
        <van-tab title="图片详情" v-html="images.goods_introduce"></van-tab>
        <van-tab title="规格参数">
          <van-row>
            <van-col span="12" class="onds">商品详情</van-col>
            <van-col span="12" class="onds">规格参数</van-col>
          </van-row>

          <van-row v-for="(item,index) in attrsd" :key="index">
            <van-col span="12" class="boxmin">{{item.attr_name}}</van-col>
            <van-col span="12" class="boxmax">{{item.attr_value}}</van-col>
          </van-row>
        </van-tab>
      </van-tabs>
    </van-row>
    <div class="boxd"></div>
  </div>
</template>

<script>
import Navgation from '../util/header.vue'
import Vue from 'vue'
import { ImagePreview } from 'vant'
Vue.use(ImagePreview)
export default {
  name: 'Home',
  props: ['id'],
  data() {
    return {
      images: [],
      infos: 0,
      bianseba: false,
      yanse: 'black',
      DataTrans: '',
      // 加入购物车
      cat_id: '',
      // 购物车
      Catid: [],
      sssss: '',
      //  商品规格参数
      attrsd: '',
      getGoshop: [],
       addressInfo:'',
      postaddress:'',
      flag:true
      
    }
  },
  created() {
    // this.getGoshop.push(JSON.parse(window.localStorage.getItem('goshop')))
    this.CarouselFigure()
    this.infos = window.localStorage.getItem('nane')
  },
  components: {
    'menu-nav': Navgation
  },
  methods: {
    async CarouselFigure() {
      const data = await this.$axios.get('/goods/detail', {
        params: { goods_id: this.id }
      })
      // console.log(data)
      if (data.meta.status !== 200) {
        this.$Toast.fail('请求数据失败')
      }
      this.images = data.message
      this.cat_id = data.message
      this.attrsd = data.message.attrs
    },
    //  加入购物车
    onClickButton(id) {
      this.Catid.push(this.cat_id)
      this.infos++
      console.log(this.Catid)
      // const goshop = window.localStorage.getItem('goshop')
      // if (goshop) {
      //   var name = JSON.parse(goshop)
      //   name.forEach(item => {
      //     this.Catid.unshift(item)
      //   })
      // } else {
      //   this.Catid = this.Catid
      // }
      // window.localStorage.setItem('goshop', JSON.stringify(this.Catid))
      window.localStorage.setItem('nane', this.infos)
    },
    // 购物车
    ShoppingCart() {
      const goshop = window.localStorage.getItem('goshop')
      if (goshop) {
        var name = JSON.parse(goshop)
        name.forEach(item => {
          this.Catid.unshift(item)
        })
      } else {
        this.Catid = this.Catid
      }
      window.localStorage.setItem('goshop', JSON.stringify(this.Catid))

      this.$router.push('/shoppingcar')
    },

    on() {
      const number = window.localStorage.getItem('addressInfo')
      if (number) {
        this.addressInfo = JSON.parse(number)
        const arr = {}
        this.addressInfo.forEach(item => {
          if (item.isDefault) {
            this.postaddress =
              item.province + ' ' + item.city + ' ' + item.county
          }
        })
      }
      if (window.localStorage.getItem('uname') === null) {
        this.$router.push('/login')
      } else {
      }
    },
    // 收藏
    bianse() {
      this.bianseba = !this.bianseba
      if (this.bianseba) {
        this.yanse = 'black'
      } else {
        this.yanse = 'red'
      }
    },

    //    图片预览

    tupian(images, index) {
      console.log(images)
      const img = []
      images.forEach(item => {
        img.push(item.pics_mid)
      })
      console.log(img)

      ImagePreview({
        images: img,
        startPosition: 1,
        onClose() {}
      })
    },
    star() {
      if (!this.flag) {
        this.yanse = 'black'
        this.flag = true
      } else {
        this.yanse = 'red'
        this.flag = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 3000px;
}
.onds {
  border: 1px solid #eee;
  height: 30px;
  text-align: center;
  font-size: 20px;
}

.boxmin {
  text-align: center;
  line-height: 100px;
  font-size: 15px;
  height: 100px;
  border: 1px solid #eee;
}
.boxmax {
  line-height: 100px;
  text-align: center;
  font-size: 15px;
  height: 100px;
  border: 1px solid #eee;
}
img {
  width: 100%;
  height: 100%;
}
.with {
  height: 350px;
}
.price {
  display: block;
  margin-top: 15px;
  width: 100px;
  height: 40px;
  font-size: 30px;

  color: red;
}
.left {
  float: left;
  width: 300px;
  font-size: 14px;
  border-right: 1px solid #eee;
  padding-right: 10px;
  font-weight: bold;
}
.right {
  float: right;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  padding-right: 20px;
}
.van-icon {
  padding-top: 5px;
  padding-left: 20px;
  font-size: 15px;
}
.boxs {
  background-color: #eee;
  height: 5px;
  width: 100%;
}
.rightsss {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  font-size: 15px;
  color: #6d6b69;
}
.boxas {
  background-color: #eee;
  height: 5px;
  margin-top: 10px;
}
.address {
  float: left;
  margin-top: 8px;
  color: #6d6b69;
  font-size: 14px;
  font-weight: bold;
}
.addressa {
  margin-top: 5px;
  float: right;
  color: #6d6b69;
}
.boxsd {
  background-color: #eee;
  height: 5px;
  width: 100%;
  margin-top: 10px;
}
.van-goods-action {
  z-index: 100;
}
</style>
